<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>modal</title>		
		<script type="text/javascript" async="" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />		
		<script type="text/javascript">
			$(document).ready(function(){
				$('#click').click(function(){
					$(this).parent().find('p').text('try watir-webdriver right now!');
				});
			});
		</script>
	</head>
		
	<body>
		<h3>modal</h3>
		<div class="row-fluid">
			<div class="span6">		
				<!-- Button to trigger modal -->
				<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal" id="show_modal">Click</a>
 
				<!-- Modal -->
				<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				  <div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="myModalLabel">Modal header</h3>
				  </div>
				  <div class="modal-body">
					<p>watir-webdriver is better than slenium-webdriver</p>
					<a href="#" id="click">click me</a>
				  </div>
				  <div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
					<button class="btn btn-primary">Save changes</button>
				  </div>
				</div>
			</div>		
		</div>		
	</body>
	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</html>
